<template>
    <div class="main">
        <headerM class="headerM" />
        <div class="content">
            <div class="content-one">
                <message />
            </div>
            <div class="content-two">

            </div>
            <div class="content-therr">

            </div>
        </div>
    </div>
</template>

<script setup>
import headerM from "@/views/main/headerM.vue";
import message from "@/views/main/message.vue";
</script>
<style lang="scss">
.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/image/bg1.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    .headerM {
        width: 100%;
        height: 93px;
    }

    .content {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .content-one {
            width: 521px;
            height: 100%;
            // background-color: red;
            padding-left: 21px;
        }

        .content-two {
            flex: 1;
            background-color: blue;
        }

        .content-therr {
            width: 527px;
            height: 100%;
            background-color: red;
        }
    }


}
</style>